<template>
  <!-- 
    计算属性 computed：
      1.减少模板中计算属性
      2.数据缓存
      3.依赖固定的数据类型 (响应式数据)
  -->
  <div>
    <p>Message: "{{ message }}"</p>
    <p>Reversed message1 (computed): "{{ reversedMessagel }}"</p>
    <p>Reversed message2 (methods): "{{ reversedMessage2() }}"</p>
    <p>{{ now }}</p>
    <button @click="() => $forceUpdate()">forceUpdate</button>
    <br />
    <input type="text" v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello vue",
    };
  },
  computed: {
    // 依赖发生变化时才会更新
    // getter
    reversedMessagel: function () {
      // message 没发生改变时不会执行
      console.log("执行 reversedMessage1");
      return this.message.split("").reverse().join("");
    },
    now: function () {
      return Date.now();
    },
  },
  methods: {
    // 每次模版更新时都会调用
    reversedMessage2: function () {
      // 每次数据更新后模板更新时都会执行
      console.log("执行 reversedMessage2");
      return this.message.split("").reverse().join("");
    },
  },
};
</script>
